<template>
  <el-card class="box-card">
    <!-- 头部 -->
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="search" class="form">
        <div class="left">
          <el-form-item label="目录名称" class="directory">
            <el-input v-model="search.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="search.state" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearBtn">清除</el-button>
            <el-button size="small" type="primary" @click="searchBtn(search.state, search.name)">搜索</el-button>
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item class="adddir">
            <el-button size="small" icon="el-icon-edit" type="success" @click="dialogFormVisible = true"
              >新增目录</el-button
            >
          </el-form-item>
        </div>
      </el-form>
      <el-alert type="info" :closable="false" show-icon :title="`数据一共 ${data.counts} 条`"> </el-alert>
    </div>
    <!-- 表格 -->
    <el-table :data="directorys" style="width: 100%">
      <el-table-column type="index" :index="indexMethod" label="序号" width="100"> </el-table-column>
      <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
      <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
      <el-table-column prop="username" label="创建者"> </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          <div>{{ parseTime(new Date(scope.row.addDate)) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="totals" label="面试题数量"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <div>{{ scope.row.state === 1 ? '已启用' : '已禁用' }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="onChangeState(scope.row.id, scope.row.state)">{{
            scope.row.state ? '禁用' : '启用'
          }}</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.state === 1"
            @click="onModifyDir(scope.row.id, scope.row.subjectName, scope.row.directoryName, scope.row.subjectID)">
            修改
          </el-button>
          <el-button type="text" size="small" :disabled="scope.row.state === 1" @click="onDeleteDir(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="pages"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="data.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize"
      layout=" prev,pager,next,sizes,jumper"
      :total="data.counts"
      background
      :hide-on-single-page="true">
    </el-pagination>
    <!-- 新增目录弹出层 -->
    <el-dialog title="新增目录" :visible.sync="dialogFormVisible" width="400px" @open="onLoadSubject">
      <el-form :model="form" :rules="rules">
        <el-form-item label="所属学科" prop="subject">
          <el-select v-model="form.subject" placeholder="请选择" style="width: 280px" size="small">
            <el-option v-for="item in subjects" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入目录名称" style="width: 280px" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirmAdd(form.subject, form.name)">确认</el-button>
      </div>
    </el-dialog>
    <!-- 修改目录弹出层 -->
    <el-dialog title="修改目录" :visible.sync="dialogModifyVisible" width="400px" @open="onLoadSubjectModify">
      <el-form :model="form" :rules="rules">
        <el-form-item label="所属学科" prop="subject">
          <el-select v-model="form.subject" placeholder="请选择" style="width: 280px" size="small">
            <el-option v-for="item in subjects" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入目录名称" style="width: 280px" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogModifyVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirmModify(form.subject, form.name)">确认</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { list, add, changeState, remove, update } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { parseTime } from '@/utils'
export default {
  name: 'directorys',
  data () {
    return {
      search: {
        name: null,
        state: null
      },
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      directorys: [],
      data: '',
      pagesize: 10,
      page: 1,
      num: null,
      dialogFormVisible: false,
      dialogModifyVisible: false,
      form: {
        name: '',
        subject: ''
      },
      subjects: [],
      dirId: '',
      rules: {
        name: { required: true, message: '请输入活动名称', trigger: 'blur' },
        subject: { required: true, message: '请选择所属学科', trigger: 'change' }
      },
      subjectID: null
    }
  },
  created () {
    this.onLoadList()
  },
  methods: {
    parseTime: parseTime,
    async onLoadList (p = '') {
      try {
        const { data } = await list(p)
        console.log(data)
        this.data = data
        this.directorys = data.items
      } catch (error) {
        console.log(error)
      }
    },
    async handleCurrentChange (val) {
      try {
        const { data } = await list({
          page: val,
          pagesize: this.pagesize,
          directoryName: this.search.name,
          state: this.num
        })
        this.directorys = data.items
        this.page = val
      } catch (err) {
        console.log(err)
      }
    },
    async handleSizeChange (val) {
      try {
        console.log(val)
        const { data } = await list({
          directoryName: this.search.name,
          state: this.num,
          pagesize: val
        })
        this.directorys = data.items
        this.pagesize = val
      } catch (error) {
        console.log(error)
      }
    },
    indexMethod (index) {
      return index + 1
    },
    clearBtn () {
      this.search.name = ''
      this.search.state = ''
      this.num = null
    },
    async searchBtn (state, name) {
      if (state === 1) {
        this.num = 1
      } else if (state === 0) {
        this.num = 0
      } else {
        this.num = null
      }
      const { data } = await list({
        directoryName: name,
        state: this.num,
        pagesize: this.pagesize
      })
      this.directorys = data.items
      this.data = data
    },
    async onLoadSubject () {
      try {
        const { data } = await simple()
        this.subjects = data
        this.form.subject = ''
        this.form.name = ''
      } catch (error) {
        console.log(error)
      }
    },
    async onLoadSubjectModify () {
      try {
        const { data } = await simple()
        this.subjects = data
      } catch (error) {
        console.log(error)
      }
    },
    async onConfirmAdd (subject, name) {
      try {
        await add({
          subjectID: subject,
          directoryName: name
        })
        this.onLoadList()
        this.dialogFormVisible = false
        this.$message({
          message: '添加目录成功',
          type: 'success'
        })
      } catch (error) {
        console.log(error)
      }
    },
    async onConfirmModify (subject, name) {
      if (subject.constructor === String) {
        subject = this.subjectID
      }
      try {
        await update({
          subjectID: subject,
          directoryName: name,
          id: this.dirId
        })
        this.onLoadList({
          directoryName: this.search.name,
          state: this.search.state,
          page: this.page
        })
        this.dialogModifyVisible = false
        this.$message({
          message: '修改目录成功',
          type: 'success'
        })
      } catch (error) {
        if (error.response.status === 422) {
          this.$message.error('请切换分支')
        }
      }
    },
    async onChangeState (id, state) {
      try {
        if (state === 1) {
          await changeState({
            id,
            state: 0
          })
        } else {
          await changeState({
            id,
            state: 1
          })
        }
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.onLoadList({
          directoryName: this.search.name,
          state: this.num,
          page: this.page
        })
      } catch (error) {
        console.log(error)
      }
    },
    onModifyDir (id, subjectName, directoryName, subjectID) {
      this.dirId = id
      this.form.subject = subjectName
      this.form.name = directoryName
      this.subjectID = subjectID
      this.dialogModifyVisible = true
    },
    onDeleteDir (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.onLoadList({
            directoryName: this.search.name,
            state: this.num,
            page: this.page
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 10px;
  padding-left: 0;
  padding-right: 0;
  ::v-deep .el-card__header {
    border-bottom: none;
    padding-bottom: 0;
  }
  .el-alert {
    margin-top: -6px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
  .form {
    display: flex;
    justify-content: space-between;
    .left {
      padding-left: 10px;
    }
    .directory {
      margin-right: 50px;
    }
    .adddir {
      margin-right: 0;
    }
  }
  .pages {
    float: right;
  }
}
</style>
